<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二手交易平台</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        var addTab1 = "    <div class=\"card\" style=\"float: left;width: 24rem\">\n" +
            "        <img src=\"images/glasses.jpg\" class=\"card-img-top\" alt=\"...\" height=\"180\">\n" +
            "        <div class=\"card-body\">\n" +
            "            <h5 class=\"card-title\" style=\"text-align: center\">" + items + "</h5>\n" +
            "            <p class=\"price\"> + + </p>\n" +
            "            <a href=\"#\" class=\"btn btn-primary\" style=\"float: right\">查看详情</a>\n" +
            "        </div>\n" +
            "    </div>\n";
        var addTab2 = "    <div class=\"card\" style=\"float: left;width: 24rem\">\n" +
            "        <img src=\"images/glasses.jpg\" class=\"card-img-top\" alt=\"...\" height=\"180\">\n" +
            "        <div class=\"card-body\">\n" +
            "            <h5 class=\"card-title\" style=\"text-align: center\"> + + </h5>\n" +
            "            <p class=\"price\"> + + </p>\n" +
            "            <a href=\"#\" class=\"btn btn-primary\" style=\"float: right\">查看详情</a>\n" +
            "        </div>\n" +
            "    </div>\n";
        var addTab3 = "    <div class=\"card\" style=\"float: left;width: 24rem\">\n" +
            "        <img src=\"images/glasses.jpg\" class=\"card-img-top\" alt=\"...\" height=\"180\">\n" +
            "        <div class=\"card-body\">\n" +
            "            <h5 class=\"card-title\" style=\"text-align: center\"> + + </h5>\n" +
            "            <p class=\"price\"> + + </p>\n" +
            "            <a href=\"#\" class=\"btn btn-primary\" style=\"float: right\">查看详情</a>\n" +
            "        </div>\n" +
            "    </div>\n";
        var addTab4 = "    <div class=\"card\" style=\"float: left;width: 24rem\">\n" +
            "        <img src=\"images/glasses.jpg\" class=\"card-img-top\" alt=\"...\" height=\"180\">\n" +
            "        <div class=\"card-body\">\n" +
            "            <h5 class=\"card-title\" style=\"text-align: center\"> + + </h5>\n" +
            "            <p class=\"price\"> + + </p>\n" +
            "            <a href=\"#\" class=\"btn btn-primary\" style=\"float: right\">查看详情</a>\n" +
            "        </div>\n" +
            "    </div>";


        function testRequest() {
            $.get(
                "test.html",
                function () {
                    // $("#itemcontent").append(addTab);

                    $(addTab1).appendTo("#col1");
                    $(addTab2).appendTo("#col2");
                    $(addTab3).appendTo("#col3");
                    $(addTab4).appendTo("#col4");


                },
                "text"
            );
        }
        setInterval(testRequest, 1000);
    </script>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light title">
    <a class="navbar-brand title">二手交易平台</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item headline-current">
                <a class="nav-link" href="index.html"> 首页 </a>
            </li>
            <li class="nav-item headline">
                <a class="nav-link" href="needs.html">需求商品</a>
            </li>
            <li class="nav-item headline">
                <a class="nav-link" href="#">发布商品</a>
            </li>
            <li class="nav-item headline">
                <a class="nav-link" href="#">发布需求</a>
            </li>
            <li class="nav-item headline">
                <a class="nav-link" href="#">个人中心</a>
            </li>
            <li class="nav-item headline">
                <a class="nav-link" href="login.html">登录/注册</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索您想要的商品..." aria-label="Search" style="width: 500px">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>

<div class="list-group" style="float: left;margin-top: 100px;background-color: blue">
    <a href="#" class="list-group-item list-group-item-action">全部</a>
    <a href="#" class="list-group-item list-group-item-action">食品饮品</a>
    <a href="#" class="list-group-item list-group-item-action">书籍</a>
    <a href="#" class="list-group-item list-group-item-action">电子产品</a>
    <a href="#" class="list-group-item list-group-item-action">服饰</a>
    <a href="#" class="list-group-item list-group-item-action">化妆品</a>
    <a href="#" class="list-group-item list-group-item-action">运动器材</a>
    <a href="#" class="list-group-item list-group-item-action">日用品</a>
    <a href="#" class="list-group-item list-group-item-action">账号</a>
    <a href="#" class="list-group-item list-group-item-action">其他</a>
</div>

<div class="card-group" style="margin-top: 100px;margin-left: 200px;margin-right: 100px">

    <div class="card" style="float: left;width: 24rem" id="col1"></div>
    <div class="card" style="float: left;width: 24rem" id="col2"></div>
    <div class="card" style="float: left;width: 24rem" id="col3"></div>
    <div class="card" style="float: left;width: 24rem" id="col4"></div>



</div>

</body>
</html>